<template>
  <div>
    <h4 class="boardName">设备统计
      <a-icon type="right" />
    </h4>
    <div class=" lightBox equipmentStatisticsBox">
       <!--  设备累计    -->
      <div>
        <h5> 设备累计<span style="color: #66B92E">{{ chartData2.expectedData[chartData2.expectedData.length-1] }}</span></h5>
        <div>
          <linechartMaxMin  :chart-data="chartData2"   :height="'254px'" :className="'lin23'"/>
        </div>
      </div>
      <!--   上线设备   -->
      <div>
        <h5> 上线设备<span >{{ chartData.expectedData[chartData.expectedData.length-1] }}</span></h5>
        <div>
          <linechartMaxMin  :chart-data="chartData"  :height="'254px'" :className="'lin1'"/>
        </div>
      </div>
      <!--  活跃用户    -->
      <div>
        <h5> 活跃用户<span style="color: #FBC225">{{ chartData1.expectedData[chartData1.expectedData.length-1] }}</span></h5>
        <div>
          <linechartMaxMin  :chart-data="chartData1"  :height="'254px'" :className="'lin2'"/>
        </div>
      </div>
     
      <div>
      </div>
    </div>
  </div>
</template>

<script>
import { timeCalculation, formatCurrentMonth, getDayAll,getYearAndMonth } from "../../../../unit/tool";
import linechartMaxMin from '../../../echartsCom/linechartMaxMin'
export default {
  name: "index",
  props:{
    ArchiveCount:{
      type:Array,
      default:()=>[]
    },
    ArchiveOnline:{
      type:Array,
      default:()=>[]
    },
    ActiveUser:{
      type:Array,
      default:()=>[]
    },
    startTime:{
      type:String,
      default:()=>[]
    },
     endTime:{
      type:String,
      default:()=>[]
    }
  },
  components:{
    linechartMaxMin
  },
  watch:{
    ArchiveOnline(val){
      this.initData(val,1)
    },
    ActiveUser(val){
      this.initData(val,2)
    },
    ArchiveCount(val){
      this.initData(val,3)
    },
},
  data(){
    return{
      chartData: {
        expectedData: [],
        date: [],
        name1: "设备",  color:'#00A8FF',areaColor:'rgba(0, 168, 255, 0.1)' },
      chartData1: {
        expectedData: [],
        date: [],
        name1: "用户",    color:'#FBC225',areaColor:'rgba(251, 194, 37, 0.1)' },
      chartData2: {
        expectedData: [],
        date: [],
        name1: "设备",   color:'rgba(102, 185, 46, 1)',areaColor:'rgba(102, 185, 46, 0.1)'  },
        minnum:null,
        maxnum:null
    }
  },
  methods:{
    sortNumber(a,b)
{
return a - b
},
    initData(val,type) {
      console.log(val,"777878");
      console.log(type,"777878");
      let expectedData = [];
      let dates = []
      // if(type==2){
        let endTime=timeCalculation(new Date(),'subtract',1)
         dates = getDayAll(this.startTime, endTime);
      // }else{
      //   dates = getDayAll(this.startTime, this.endTime);
      // }
      
        dates.forEach(( items) => {
          let  opt= val.find(day => day.aname == items);//每天
          if (opt) {
              expectedData.push(opt.bnum);
          } else {
            expectedData.push(0);
          }
        });
        console.log(expectedData,"ioioo");
      // val.forEach(item => {
      //   expectedData.push(item.bnum )
      //   dates.push(item.aname)
      // })
      if (type == 1) {
        this.chartData.expectedData = expectedData;
        this.chartData.date = dates;
        
      } else if (type == 2) {
        this.chartData1.expectedData = expectedData;
        this.chartData1.date = dates;
      
      } else if (type == 3) {
        this.chartData2.expectedData = expectedData;
        this.chartData2.date = dates;
        this.$emit('expected',expectedData)

      }
    },
    
  }

};
</script>

<style scoped lang="less">
@import "../../light.less";
</style>
